import React, { Component } from 'react'
import "../assert/css/uncenter.css"
import { Carousel } from 'antd'
import "antd/lib/carousel/style/index.css"
import {bannerRequest,couponRequest} from "../request/coupon_request"
import { userinfo } from '../utils/getUserInfo'
import payment from "../assert/imgs/icon/payment.png"
import delivery from "../assert/imgs/icon/delivery.png"
import evaluation from "../assert/imgs/icon/evaluation.png"
import service from "../assert/imgs/icon/service.png"
import png_04 from "../assert/imgs/pic/04.png"
import Header from "../components/DefaultHeader"

export default class Uncenter extends Component {

    state={
        number:0,
        banner_list:[]
    }
    UNSAFE_componentWillMount(){
        bannerRequest().then(res=>{
            this.setState({banner_list:res.list})
        })

         var uid = userinfo().uid
         couponRequest(uid).then(res=>{
            var number = 0
            res.list.map(item=>{
                item.content.map(i=>{
                    number++
                })
            })
            this.setState({number})
        }) 
    }   
    logout(){
        localStorage.removeItem("login_data")
        this.props.restCarList()
        this.props.history.push("/login")
        
    }
    render() {
        const {number,banner_list} = this.state
        const {nickname} = userinfo()
        const contentStyle = {
            width: '100%'
          };
        return (
            <div className="ucenter-container">
        <Header title="个人中心" right_text='退出' right_method={()=>this.logout()}/>
        <div className="top">
            <div className="header">
                <div className="avatar">
                    <img src={png_04} alt="" />
                </div>
                <div className="info">
                    <h3>{nickname}</h3>
                </div>
                <div className="tag">每日签到</div>
            </div>
            <ul className="info-list">
                <li>
                    <h3>12</h3>
                    <p>我的收藏</p>
                </li>
                <li>
                    <h3>12</h3>
                    <p>浏览记录</p>
                </li>
                <li>
                    <h3>&yen;12</h3>
                    <p>我的红包</p>
                </li>
                <li onClick={()=>this.props.history.push("/coupon")}>
                    <h3>{number}</h3>
                    <p>优惠券</p>
                </li>
            </ul>
            <div className="order-info">
                <div className="title">
                    <h3>我的订单</h3>
                    <span>全部订单 &gt; </span>
                </div>
                <ul>
                    <li>
                        <img src={payment} alt="" />
                        <p>待付款</p>
                    </li>
                    <li>
                        <img src={delivery} alt="" />
                        <p>待收货</p>

                    </li>
                    <li>
                        <img src={evaluation} alt="" />
                        <p>评价</p>

                    </li>
                    <li>
                        <img src={service} alt="" />
                        <p>售后/退款</p>

                    </li>
                </ul>
            </div>
        </div>
        <div className="banner">
        <Carousel autoplay>
            {
                banner_list.map(item=>(
                    <div key={item.id}>
                        <img style={contentStyle} src={this.$static_host+item.img} alt="" />
                    </div>
                ))
            }
           
  </Carousel>
        </div>

        <ul className="section">
            <li>地址管理</li>
            <li>我的钱包</li>
            <li>我的二维码</li>
            <li>我的小伙伴</li>
            <li>0元试用</li>
        </ul>
    </div>
        )
    }
}
